<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>下单窗口</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.7.2/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mqtt/dist/mqtt.min.js"></script>
    <link rel="stylesheet" href="../font/iconfonMy.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'serif';
            user-select: none;
            position: relative;
        }

        body {
            font-size: 0;
            color: #010101;
            height: 300px;
            cursor: default;
        }

        #app {
            height: 345px;
        }

        .tab_bar {
            font-size: 14px;
            background-color: #d5d8e6;
            color: #010101;
            display: flex;
            align-items: center;
            line-height: 30px;
            justify-content: space-between;
            height: 30px;
            -webkit-app-region: drag;
        }

        .tab_bar_left {
            padding: 0 5px;
        }

        .tab_bar_left span {
            margin-left: 10px;
        }

        .tab_bar_right {
            display: flex;
            align-items: center;
            -webkit-app-region: no-drag;
        }

        .tab_bar_right i {
            font-size: 18px;
            padding: 0 7px;
        }

        .icon-shezhi:hover {
            background-color: #317dc2;
            color: #fff;
        }

        .icon-a-tubiaozhediexiangxia:hover {
            background-color: #e81122;
            color: #fff;
        }

        .xiad_body {
            background-color: #f0f0f0;
            font-size: 12px;
            padding: 6px;
            display: flex;
            align-items: center;
            height: 310px;
        }

        .xiad_body_left {
            background-color: #ffffff;
            border: 2px solid #afb3b8;
            padding: 0 8px;
            width: 115px;
            height: 297px;
        }

        .yiji_firsrt {
            position: relative;
        }

        .yiji_firsrt::after {
            content: "";
            position: absolute;
            border-left: 1px dotted #9b9b9b;
            height: calc(100% - 15px);
            top: 15px;
            left: 5px
        }

        .yiji_title {
            display: flex;
            align-items: center;
        }

        .yiji_zhedie {
            border: 1px solid #9b9b9b;
            background-color: #fafbfb;
            border-radius: 2px;
            width: 10px;
            height: 10px;
            line-height: 7px;
            text-align: center
        }

        .jibie_item {
            padding-left: 8px;
            position: relative;
        }

        .jibie_item::after {
            content: '';
            position: absolute;
            border-bottom: 1px dotted #9b9b9b;
            width: 4px;
            height: 1px;
            top: 7px;
            left: 2px;
        }

        .yiji_childer {
            margin-left: 25px;
        }

        .erji_title::before {
            content: '';
            position: absolute;
            border-left: 1px dotted #9b9b9b;
            height: 100%;
            top: 0;
            left: 1px
        }

        .erji_title:last-of-type::before {
            height: 50%;
        }

        .body_yiji .active {
            background-color: #0078d7;
            color: #fff;
        }

        .left_zhedie_btn {
            height: 60px;
            line-height: 60px;
        }

        .left_zhedie_btn:hover {
            box-shadow: 1px 1px 1px 1px #999;
        }

        .left_zhedie_btn .iconfonMy {
            display: inline-block;
            transform: rotate(90deg);
        }

        .left_zhedie_btn .icon {
            display: inline-block;
            transform: rotate(-90deg);
        }

        .body_right,
        .body_right2,
        .body_right3,
        .body_right4,
        .body_right6,
        .body_right7,
        .body_right8 {
            height: 310px;
            padding: 6px 0;
            display: flex;
        }

        .body_right_left_top {
            box-shadow: 0 0 1px 1px #dddddd;
            padding: 0 10px;
            width: 375px;
            height: 175px;
        }

        .body_right_left_title {
            display: flex;
            align-items: center;
            position: relative;
        }

        .body_right_left_title .hexue {
            width: 140px;
        }

        .body_right_left_title .s_cont {
            height: 20px;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            position: relative;
        }

        .body_right_left_title .icon-zhuanhuan {
            width: 30px;
            text-align: center;
        }

        .body_right_left_title .hexue input {
            font-weight: bold;
            width: 110px;
        }

        .body_right_left_title .shoushu input {
            font-weight: bold;
            width: 60px;
        }

        .body_right_left_title .jiage {
            margin-left: 5px;
        }

        .body_right_left_title .jiage input {
            font-weight: bold;
            width: 75px;
        }

        .hexue .sou_suo:hover {
            box-shadow: 1px 1px 1px 1px #999;
        }

        .max_min_price {
            position: absolute;
            top: 5px;
            right: 0;
            line-height: 25px;
        }

        .s_price {
            background-color: #f0f0f0;
            position: absolute;
            left: 1px;
            bottom: 0;
            height: 19px;
            width: 73px;
            z-index: 10;
        }

        .jiage_caozuo {
            position: absolute;
            background-color: #f0f0f0;
            box-shadow: 1px 1px 1px 1px #a0a0a0;
            top: 5px;
            left: 40px;
            width: 150px;
            padding: 5px;
            z-index: 50;
            text-align: center;
        }

        .jiage_caozuo span {
            border-radius: 2px;
            display: inline-block;
            width: 40px;
            background-color: #fdfdfd;
            border: 1px solid #d0d0d0;
            text-align: center;
            margin: 2px;
            line-height: 20px;
        }

        .jiage_s_cont:active {
            box-shadow: 1px 1px 1px 1px #999;
        }

        .body_right_left_mp {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
        }

        .mp_item {
            border: 1px solid #72a6d9;
            border-radius: 3px;
            flex: 1;
            margin: 0 5px;
            text-align: center;
            padding: 0 5px;
        }

        .mp_item:hover {
            border-color: #f00000;
        }

        .mp_item:nth-child(2):hover {
            border-color: #009600;
        }

        .mp_item:nth-child(3):hover {
            border-color: #000096;
        }

        .mp_item div:nth-child(1) {
            border-bottom: 1px solid #94968b;
            line-height: 25px;
        }

        .mp_item div:nth-child(2) {
            font-size: 16px;
            line-height: 30px;
        }

        .red {
            color: #f00000;
        }

        .green {
            color: #009600;
        }

        .blue {
            color: #000096;
        }

        .body_right_left_btn {
            text-align: right;
            padding: 10px;
        }

        .body_right_left_btn span,
        .body_right_right_btn span {
            display: inline-block;
            border: 1px solid #d0d0d0;
            border-radius: 3px;
            background: #fdfdfd;
            line-height: 20px;
            width: 60px;
            text-align: center;
            margin-right: 5px;
        }

        .body_right_left_center .introduce {
            height: 30px;
            line-height: 30px;
            padding: 0 5px;
        }

        .body_right_left_center .inp_frame {
            border: 1px solid #fefefe;
            border-bottom: none;
            box-shadow: 0px 1px 2px -1px #838383;
            height: 65px;
        }

        .body_right_left_buttom {
            position: relative;
        }

        .body_right_left_buttom span {
            color: #000096;
            font-size: 14px;
            margin: 0 5px;
            line-height: 30px;
        }

        .body_right_left_buttom .icon-a-tubiaozhediexiangxia {
            position: absolute;
            right: 0;
            transform: rotate(-90deg);
            width: 30px;
            height: 30px;
            text-align: center;
        }

        .body_right_right {
            padding-left: 6px;
            width: 753px;
        }

        .body_right_right_table {
            display: flex;
            align-items: center;
        }

        .body_right_right_table span {
            background-color: #e6e6e6;
            padding: 0 8px;
            border-right: 1px solid #acacac;
        }

        .body_right_right_table .active {
            background-color: #ffffff;
        }

        .el-table th.el-table__cell>.cell,
        .el-table td.el-table__cell div {
            padding: 0;
            padding-right: 3px;
            text-align: right;
        }

        .el-table th.el-table__cell.is-leaf,
        .el-table--enable-row-transition .el-table__body td.el-table__cell {
            padding: 0;
            color: #000000;
            font-weight: normal;
        }

        .el-table th.el-table__cell.is-leaf {
            background-color: #f0f0f0;
            border-color: #aaaaaa;
        }

        .el-table--enable-row-transition .el-table__body td.el-table__cell {
            background-color: #f1f8ff;
            border-color: #f0f0f0;
        }

        .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
            width: 0px;
            height: 7px;
        }

        .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
            background: #c0c0c0;
            border-radius: 5px;
        }

        .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
            background: #c0c0c0;
        }

        .body_right_right_btn {
            border-bottom: 1px solid #cfcfcf;
            box-shadow: 0 1px 1px -6px #cfcfcf;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 5px 0;
        }

        .body_right_left_top2 {
            height: 188px;
        }

        .body_right_left_center .inp_frame2 {
            height: 55px;
        }

        .body_right_left_title2 {
            display: block;
        }

        .right_left_title_item {
            display: flex;
            align-items: center;
            padding-top: 5px;
        }

        .right_left_title_item .title {
            width: 31px;
            padding-right: 7px;
            text-align: right;
        }

        .mai_mai_btn,
        .PING_C {
            background-color: #d7e3f1;
            border: 1px solid #3b7db3;
            border-radius: 2px;
            line-height: 25px;
            height: 25px;
            width: 100px;
            display: flex;
        }

        .mai_mai_btn span,
        .PING_C span {
            flex: 1;
            text-align: center;
        }

        .mai_mai_btn span:nth-of-type(1),
        .PING_C span {
            border-right: 1px solid #3b7db3;
        }

        .PING_C {
            width: 150px;
        }

        .PING_C span:nth-last-of-type(1) {
            border: none;
        }

        .mai_mai_btn .active,
        .PING_C .active {
            background-color: #448ac5;
            color: #fff;
        }

        .bao_zhi {
            display: flex;
            align-items: center;
            padding-left: 5px;
        }

        .bao_zhi label {
            padding-left: 2px;
        }

        .shou_shu {
            position: relative;
            font-weight: bold;
        }

        .shou_shu input,
        .jaige_input input {
            width: 75px;
            font-weight: bold;
        }

        .shou_shu input::-webkit-inner-spin-button,
        .shou_shu input::-webkit-outer-spin-button,
        .jaige_input input::-webkit-inner-spin-button,
        .jaige_input input::-webkit-outer-spin-button,
        .right3_left_div input::-webkit-inner-spin-button,
        .right3_left_div input::-webkit-outer-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .jia_jian {
            display: inline-block;
            border: 1px solid #9ba6b4;
            background-color: #f0f0f0;
            width: 15px;
            text-align: center;
        }

        .number {
            font-weight: normal;
            margin-left: 10px;
        }

        .jaige_input input {
            width: 75px;
            font-weight: bold;
        }

        .open_view_list {
            margin: 0 8px;
            width: 15px;
        }

        .open_view_list:hover {
            box-shadow: 1px 1px 1px 1px #cfcfcf;
        }

        .xiadan_btn {
            display: flex;
        }

        .xiadan_btn span {
            color: #fff;
            background-color: #c74547;
            line-height: 25px;
            border-radius: 3px;
            padding: 0 5px;
        }

        .xiadan_btn span:nth-of-type(2) {
            background-color: #fdfdfd;
            color: #000;
            margin-left: 10px;
        }

        .view_list {
            background-color: #f0f0f0;
            position: absolute;
            box-shadow: 1px 1px 1px 1px #737373;
            left: 27px;
            padding: 13px 10px 13px 15px;
            z-index: 10;
        }

        .view_list span {
            background-color: #fdfdfd;
            border: 1px solid #d1d1d1;
            line-height: 20px;
            width: 70px;
            display: block;
            margin-bottom: 5px;
            padding: 0 5px;
        }

        .view_list span:nth-last-of-type(1) {
            margin: 0;
        }

        .zhang_die {
            position: absolute;
            right: 10px;
            bottom: -5px;
        }

        .zhang_die span {
            display: block;
            line-height: 30px;
        }

        .z_z {
            color: #f00201;
        }

        .d_d {
            color: #6fad31;
        }

        .zhang_die i {
            color: #000;
            font-style: normal;
        }

        .body_right2_left_top,
        .right2_left_bottom {
            border: 2px solid #e2e2e2;
            width: 575px;
            display: flex;
            flex-wrap: wrap;
            padding: 5px;
            height: 130px;
        }

        .body_right2_left_top>div {
            line-height: 24px;
            display: flex;
            align-items: center;
        }

        .body_right2_left_top>div input {
            margin-right: 2px;
        }

        .body_right2_left_top>div:nth-of-type(3n + 1) {
            width: calc(100% * 5 / 12);
        }

        .body_right2_left_top>div:nth-of-type(3n + 2) {
            width: calc(100% * 4 / 12);
        }

        .body_right2_left_top>div:nth-of-type(3n + 3) {
            width: calc(100% * 3 / 12);
        }

        .body_right2_left_top .right2_left_top_last_div {
            width: 50% !important;
        }

        .right2_left_bottom {
            margin-top: 4px;
            height: 115px;
            justify-content: space-between;
        }

        .right2_left_bottom_div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            line-height: 24px;
            font-size: 13px;
            padding-right: 10px;
        }

        .right2_left_bottom_div:nth-of-type(2n + 1) {
            width: 38%;
        }

        .right2_left_bottom_div:nth-of-type(2n + 2) {
            width: 50%;
        }

        .right2_left_bottom_div select {
            font-size: 13px;
            width: 70px;
        }

        .right2_left_bottom_div .right2_left_bottom_div_heyue {
            width: 120px;
        }

        .right2_left_btn {
            margin-top: 7px;
        }

        .right2_left_btn button,
        .right3_left_btn button,
        .body_right4_div button,
        .body_right6_left_div button {
            border-radius: 4px;
            background-color: #fdfdfd;
            border: 1px solid #d5d5d5;
            padding: 0 20px;
            line-height: 24px;

        }

        .right2_left_btn button:active {
            border-color: #0078d7;
        }

        .body_right2_right {
            padding: 4px 20px;
        }

        .right2_right_select select {
            font-size: 13px;
        }

        .right2_right_body {
            margin: 8px 0;
            border: 2px solid #e2e2e2;
            height: 250px;
            width: 485px;
            padding: 0 2px;
        }

        .right2_right_body_div {
            display: flex;
            align-items: center;
            line-height: 21px;
        }

        .right2_right_body_div select {
            font-size: 13px;
            margin-left: 20px;
            width: 70px;
        }

        .right2_right_body_div45 span {
            width: 100px;
        }

        .right2_right_body_div45 select {
            width: 150px;
        }

        .body_right3_left {
            border: 1px s;
        }

        .body_right3_left,
        .body_right3_right {
            margin-top: 10px;
            border: 2px solid #e2e2e2;
            width: 370px;
            height: 210px;
            position: relative;
            padding: 10px 0 10px 8px;
        }

        .body_right3_left_title,
        .body_right3_right_title,
        .body_right6_title {
            position: absolute;
            background-color: #f0f0f0;
            top: -8px;
            left: 10px;
        }

        .right3_left_btn {
            padding: 5px 0;
        }

        .right3_left_div {
            display: flex;
            align-items: center;
            padding: 13px 0;
        }

        .right3_left_div input {
            width: 38px;
            font-size: 12px;
            margin-left: 3px;
        }

        #xiadanView {
            width: auto;
        }

        .baifenhao {
            margin-left: 3px;
        }

        .right3_left_div_span {
            width: 90px;
        }

        .right3_left_div_btn {
            border-radius: 2px;
            background-color: #fdfdfd;
            border: 1px solid #d5d5d5;
            padding: 0 5px;
            font-size: 12px;
            line-height: 19px;
        }

        .right3_left_div_btn:active {
            border-color: #0078d7;
        }

        .body_right3_right {
            margin-left: 10px;
            width: 355px;
            padding-top: 15px;
            padding-right: 10px;
        }

        .body_right3_right_div {
            padding-bottom: 10px;
        }

        .body_right4 {
            display: block;
            padding: 15px;
            width: 320px;
        }

        .body_right4_div {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .body_right4_div span {
            width: 80px;
        }

        .body_right4_div input,
        .body_right4_div select {
            font-size: 12px;
            width: 90px;
        }

        .body_right4_div button {
            font-size: 12px;
            width: 170px;
        }

        .body_right4_cont {
            line-height: 19px;
        }

        .body_right5_left {
            width: 300px;
            height: 190px;
        }

        .right5_left_div {
            padding: 5px 0;
        }

        .right5_left_div input,
        .right5_left_div select {
            font-size: 12px;
            width: 50px;
        }

        .right5_left_div input::-webkit-inner-spin-button,
        .right5_left_div input::-webkit-outer-spin-button {
            -webkit-appearance: button;
        }

        .right5_left_div select {
            width: 120px;
        }

        .body_right5_right {
            width: 370px;
            height: 190px;
        }

        .body_right6_cont {
            margin-left: 10px;
            margin-top: 10px;
            border: 2px solid #e2e2e2;
            width: 760px;
            height: 280px;
            position: relative;
            padding: 15px 0 10px 8px;
            display: flex;
        }

        .body_right6_left {
            width: 310px;
        }

        .body_right6_left_div {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .body_right6_left_div span {
            margin-right: 10px;
        }

        .body_right6_left_div select {
            width: 130px;
            font-size: 12px;
        }

        .body_right6_left_div .sun_jia {
            border: 2px solid #f8f8f8;
            background: #f0f0f0;
            padding: 0 20px 0 3px;
        }

        .body_right6_left_div button {
            font-size: 12px;
            padding: 0 5px;
        }

        .body_right6_right {
            flex: 1;
        }

        .body_right6_right_div {
            margin-bottom: 5px;
            display: flex;
            align-items: center;
        }

        .body_right6_right_div input {
            margin-right: 2px;
        }

        .body_right6_right_div select {
            font-size: 12px;
            margin: 0 5px;
            width: 70px;
        }

        .body_right6_right_div_set_width {
            width: 150px;
        }

        .body_right6_right_div a {
            color: #3c3ccc;
            text-decoration: none;
            margin-left: 5px;
        }

        .body_right7_cont {
            width: 890px;
            height: 190px;
        }

        .body_right7_left {
            width: 440px;
        }

        .body_right6_left_div_name {
            width: 130px;
        }

        .body_right7_left select {
            font-size: 12px;
            width: 110px;
        }

        .body_right7_left input {
            font-size: 12px;
            margin-right: 2px;
        }

        .body_right7 {
            padding-left: 40px;
        }

        .body_right7_left {
            border-radius: 2px;
            background-color: #ffffff;
            border: 2px solid #a0a4aa;
            margin: 10px 0;
            width: 235px;
            overflow-y: scroll;
        }

        .body_right7_left::-webkit-scrollbar {
            width: 4px;
        }

        .body_right7_left_div {
            display: flex;
            align-items: center;
            line-height: 20px;
            border-bottom: 2px solid #f2f2f2;
        }

        .kuai_jie_jian {
            border-right: 2px solid #f2f2f2;
            flex: 2;
            padding: 0 5px;
        }

        .dong_zuo {
            flex: 3;
            padding: 0 5px;
        }

        .body_right7_right {
            margin-top: 10px;
            padding-left: 7px;
        }

        .body_right7_right_div {
            margin-bottom: 7px;
        }

        .body_right7_right input {
            width: 60px;
            margin-left: 20px;
        }

        .body_right7_right select {
            width: 40px;
            margin-left: 20px;
        }

        .body_right8 {
            display: block;
            padding: 30px 10px;
        }

        .body_right8_div {
            display: flex;
            align-items: center;
            margin-bottom: 7px;
        }

        .body_right8_div input {
            margin-right: 2px;
        }

        .yuzhi {
            margin: 0 5px;
            width: 70px;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="tab_bar">
            <div class="tab_bar_left">
                博富模拟- loginInfo.bh
                <span>
                    权益：{{filersZiji(zijin,'权益')}}，可用资金：{{filersZiji(zijin,'可用资金')}}，资金使用率：{{filersZiji(zijin,'资金使用率')}}%
                </span>
            </div>
            <div class="tab_bar_right">
                <i class="iconfonMy icon-shezhi" @click="changeLeftTap(!isShowLeft)"></i>
                <i class="iconfonMy icon-a-tubiaozhediexiangxia"></i>
            </div>
        </div>
        <div class="xiad_body">
            <div class="xiad_body_left" v-show="isShowLeft">
                <div class="body_yiji yiji_firsrt">
                    <div class="yiji_title">
                        <span class="yiji_zhedie" v-show="isoneMore" @click="isoneMore=!isoneMore">-</span>
                        <span class="yiji_zhedie" v-show="!isoneMore" @click="isoneMore=!isoneMore">+</span>
                        <span class="jibie_item" @click="selectMuluTap(-1)"><span
                                :class="{active:selectMulu==-1}">下单板</span></span>
                    </div>
                    <div class="yiji_childer" v-show="isoneMore">
                        <div class="jibie_item erji_title" @click="selectMuluTap(0)">
                            <span :class="{active:selectMulu==0}">三键下单</span>
                        </div>
                        <div class="jibie_item erji_title" @click="selectMuluTap(1)">
                            <span :class="{active:selectMulu==1}">传统下单</span>
                        </div>
                    </div>
                </div>
                <div class="body_yiji">
                    <div class="yiji_title">
                        <span class="yiji_zhedie" v-show="istwoMore" @click="istwoMore=!istwoMore">-</span>
                        <span class="yiji_zhedie" v-show="!istwoMore" @click="istwoMore=!istwoMore">+</span>
                        <span class="jibie_item" @click="selectMuluTap(2)">
                            <span :class="{active:selectMulu==2}">参数设置</span>
                        </span>
                    </div>
                    <div class="yiji_childer" v-show="istwoMore">
                        <div class="jibie_item erji_title" @click="selectMuluTap(3)">
                            <span :class="{active:selectMulu==3}">选项设置</span>
                        </div>
                        <div class="jibie_item erji_title" @click="selectMuluTap(4)">
                            <span :class="{active:selectMulu==4}">默认手数</span>
                        </div>
                        <div class="jibie_item erji_title" @click="selectMuluTap(5)">
                            <span :class="{active:selectMulu==5}">超价参数</span>
                        </div>
                        <div class="jibie_item erji_title" @click="selectMuluTap(6)">
                            <span :class="{active:selectMulu==6}">追价参数</span>
                        </div>
                        <div class="jibie_item erji_title" @click="selectMuluTap(7)">
                            <span :class="{active:selectMulu==7}">止损参数</span>
                        </div>
                        <div class="jibie_item erji_title" @click="selectMuluTap(8)">
                            <span :class="{active:selectMulu==8}">条件单参数</span>
                        </div>
                        <div class="jibie_item erji_title" @click="selectMuluTap(9)">
                            <span :class="{active:selectMulu==9}">炒单热键</span>
                        </div>
                        <div class="jibie_item erji_title" @click="selectMuluTap(10)">
                            <span :class="{active:selectMulu==10}">交易安全</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="left_zhedie_btn">
                <i class="iconfonMy icon-xiajiantou" v-show="isShowLeft" @click="changeLeftTap(false)"></i>
                <i class="iconfonMy icon-xiajiantou icon" v-show="!isShowLeft" @click="changeLeftTap(true)"></i>
            </div>
            <div class="body_right" v-show="showRight==0||showRight==1">

                <div class="body_right_left" v-show="showRight==0">
                    <div class="body_right_left_top">
                        <div class="body_right_left_title">
                            <div class="hexue">
                                <div class="s_cont">
                                    <i class="iconfonMy icon-24gl-lock2" title="锁定" v-show="suoPrice"
                                        @click="suoPriceTap(false)"></i>
                                    <i class="iconfonMy icon-24gl-unlock4" title="非锁定" v-show="!suoPrice"
                                        @click="suoPriceTap(true)"></i>
                                </div>
                                <div class="s_cont">
                                    <input type="text" v-model="selectHeyue.heyue_bh" :disabled="suoPrice"><i
                                        class="iconfonMy icon-sousuo sou_suo" @click="openHeyueListTap"></i>
                                </div>
                            </div>
                            <div class="shoushu">
                                <div class="s_cont">
                                    手数
                                    <i class="iconfonMy icon-zhuanhuan"></i>
                                </div>
                                <div class="s_cont">
                                    <input type="number" v-model="selectHeyue.reserv_num">
                                </div>
                            </div>
                            <div class="jiage">
                                <div class="s_cont" @mouseleave="isSelectPrice=false">
                                    <span class="jiage_s_cont" @click="isSelectPrice=!isSelectPrice"> 价格
                                        <i>...</i>
                                    </span>
                                    <div class="jiage_caozuo" v-show="isSelectPrice">
                                        <span>排队价</span>
                                        <span>对手价</span>
                                        <span>市价</span>
                                        <span>最新价</span>
                                        <span>超价</span>
                                    </div>
                                </div>
                                <div class="s_cont">
                                    <input type="number"></i>
                                    <div class="s_price"></div>
                                </div>
                            </div>

                            <div class="max_min_price">
                                <div style="color: #f03f8c;">3841</div>
                                <div style="color: #44ac90;">3841</div>
                            </div>
                        </div>

                        <div class="body_right_left_mp">
                            <div class="mp_item">
                                <div class="red">0.0</div>
                                <div class="red">买多</div>
                            </div>
                            <div class="mp_item">
                                <div class="green">0.0</div>
                                <div class="green">卖空</div>
                            </div>
                            <div class="mp_item">
                                <div>先开先平</div>
                                <div class="blue">平仓</div>
                            </div>
                        </div>

                        <div class="body_right_left_btn">
                            <span>撤单</span>
                            <span>对价跟</span>
                            <span>排队跟</span>
                            <span>连续追</span>
                        </div>

                    </div>

                    <div class="body_right_left_center">
                        <div class="introduce"> 300股指 点值</div>
                        <div class="inp_frame"></div>
                    </div>
                    <div class="body_right_left_buttom">
                        <span>止损开仓</span>
                        <span>画线下单</span>
                        <span>添加条件单</span>
                        <span>出入金</span>
                        <i class="iconfonMy icon-a-tubiaozhediexiangxia"></i>
                    </div>
                </div>

                <div class="body_right_left" v-show="showRight==1">
                    <div class="body_right_left_top body_right_left_top2">
                        <div class="body_right_left_title body_right_left_title2">
                            <div class="right_left_title_item">
                                <div class="title">
                                    <i class="iconfonMy icon-24gl-lock2" title="锁定" v-show="suoPrice"
                                        @click="suoPriceTap(false)"></i>
                                    <i class="iconfonMy icon-24gl-unlock4" title="非锁定" v-show="!suoPrice"
                                        @click="suoPriceTap(true)"></i>
                                </div>
                                <input type="text"><i class="iconfonMy icon-sousuo sou_suo"></i>
                            </div>
                            <div class="right_left_title_item">
                                <div class="title"></div>
                                <div class="mai_mai_btn">
                                    <span class="active">买</span>
                                    <span>卖</span>
                                </div>
                                <div class="bao_zhi">
                                    <input type="checkbox" name="" id="bz">
                                    <label for="bz">保值</label>
                                </div>
                            </div>
                            <div class="right_left_title_item">
                                <div class="title"></div>
                                <div class="PING_C">
                                    <span class="active">开仓</span>
                                    <span>平仓</span>
                                    <span>平今</span>
                                </div>
                            </div>
                            <div class="right_left_title_item">
                                <div class="title">手数</div>
                                <div class="shou_shu">
                                    <input type="number">
                                    <span class="jia_jian">-</span>
                                    <span class="jia_jian">+</span>
                                    <span class="number">
                                        <=5 </span>
                                </div>
                            </div>
                            <div class="right_left_title_item">
                                <div class="title">
                                    <i class="iconfonMy icon-duankailianjie" title="指定价" v-show="selectPrice==1"></i>
                                    <i class="iconfonMy icon-lianjie" title="跟盘价" v-show="selectPrice==2"></i>
                                </div>
                                <div class="jaige_input">
                                    <input type="number">
                                    <span class="jia_jian">-</span>
                                    <span class="jia_jian">+</span>
                                </div>
                                <div style=" display: flex; align-items: center;position: relative;"
                                    @mouseleave="isViewList=false">
                                    <div class="open_view_list" @click="isViewList=!isViewList">
                                        ...</div>
                                    <div>卖价</div>
                                    <div class="view_list" v-if="isViewList">
                                        <span>113</span>
                                        <span>113</span>
                                        <span>113</span>
                                        <span>113</span>
                                        <span>113</span>
                                    </div>
                                </div>
                            </div>
                            <div class="right_left_title_item">
                                <div class="title"></div>
                                <div class="xiadan_btn">
                                    <span>下单（买开仓）</span>
                                    <span>复位</span>
                                </div>
                            </div>
                            <div class="zhang_die">
                                <span class="z_z">涨板 <i>3655285</i></span>
                                <span class="d_d">跌板 <i>3655285</i></span>
                            </div>
                        </div>
                    </div>

                    <div class="body_right_left_center">
                        <div class="introduce"> 300股指 点值</div>
                        <div class="inp_frame inp_frame2"></div>
                    </div>
                    <div class="body_right_left_buttom">
                        <span>止损开仓</span>
                        <span>画线下单</span>
                        <span>添加条件单</span>
                        <i class="iconfonMy icon-a-tubiaozhediexiangxia"></i>
                    </div>
                </div>

                <div class="body_right_right">
                    <div class="body_right_right_table">
                        <span class="active">持仓</span>
                        <span>委托</span>
                        <span>成交</span>
                        <span>预备单</span>
                        <span>条件单</span>
                        <span>损盈单</span>
                        <span>权益图</span>
                        <span>资金表</span>
                        <span>合约表</span>
                        <span>期权持仓表</span>
                        <span>期权行权</span>
                    </div>
                    <el-table :data="tableData"
                        style="width: 755px;border: 1px solid #979ba2;box-shadow:  0 0 1px 1px #c0c2c6;" height="140"
                        size="mini" border>
                        <el-table-column prop="address" label="品种" width="70"></el-table-column>
                        <el-table-column prop="address" label="合约" width="65"></el-table-column>
                        <el-table-column prop="address" label="方向" width="40"></el-table-column>
                        <el-table-column prop="address" label="总仓" width="60"></el-table-column>
                        <el-table-column prop="address" label="可用" width="60"></el-table-column>
                        <el-table-column prop="address" label="今仓" width="61"></el-table-column>
                        <el-table-column prop="address" label="今可用" width="61"></el-table-column>
                        <el-table-column prop="address" label="开仓均价" width="81"></el-table-column>
                        <el-table-column prop="address" label="盈利价差" width="80"></el-table-column>
                        <el-table-column prop="address" label="逐笔浮盈" width="80"></el-table-column>
                        <el-table-column prop="address" label="浮盈比例" width="70"></el-table-column>
                        <el-table-column prop="address" label="损盈" width="40"></el-table-column>
                        <el-table-column prop="address" label="价值" width="90"></el-table-column>
                        <el-table-column prop="address" label="保证金" width="90"></el-table-column>
                        <el-table-column prop="address" label="资金占比" width="70"></el-table-column>
                        <el-table-column prop="address" label="持仓均价" width="80"></el-table-column>
                        <el-table-column prop="address" label="盯市浮盈" width="80"></el-table-column>
                        <el-table-column prop="address" label="投保" width="40"></el-table-column>
                    </el-table>
                    <div class="body_right_right_btn">
                        <span>平33%</span>
                        <span>平50%</span>
                        <span>平100%</span>
                        <span>反手</span>
                        <span>损盈</span>
                    </div>
                    <el-table :data="tableData"
                        style="width: 755px;border: 1px solid #979ba2;box-shadow:  0 0 1px 1px #c0c2c6;" height="110"
                        size="mini" border>
                        <el-table-column prop="address" label="时间" width="70"></el-table-column>
                        <el-table-column prop="address" label="品种" width="46"></el-table-column>
                        <el-table-column prop="address" label="合约" width="56"></el-table-column>
                        <el-table-column prop="address" label="状态" width="37"></el-table-column>
                        <el-table-column prop="address" label="买卖" width="36"></el-table-column>
                        <el-table-column prop="address" label="开平" width="36"></el-table-column>
                        <el-table-column prop="address" label="委托价" width="50"></el-table-column>
                        <el-table-column prop="address" label="委托量" width="50"></el-table-column>
                        <el-table-column prop="address" label="可撤" width="36"></el-table-column>
                        <el-table-column prop="address" label="已成交" width="50"></el-table-column>
                        <el-table-column prop="address" label="投保" width="36"></el-table-column>
                        <el-table-column prop="address" label="预止损" width="61"></el-table-column>
                        <el-table-column prop="address" label=""></el-table-column>
                    </el-table>

                </div>
            </div>

            <div class="body_right2" v-show="showRight==3">
                <div class="body_right2_left">
                    <div class="body_right2_left_top">
                        <div>
                            <input type="checkbox" id="shengyin">
                            <label for="shengyin">交易声音提示</label>
                        </div>
                        <div>
                            <input type="checkbox" id="shengyin">
                            <label for="shengyin">持仓列表按方向分列</label>
                        </div>
                        <div>
                            <input type="checkbox" id="shengyin">
                            <label for="shengyin">盘口点价下单</label>
                        </div>
                        <div>
                            <input type="checkbox" id="shengyin">
                            <label for="shengyin">下单窗口位置记忆</label>
                        </div>
                        <div>
                            <input type="checkbox" id="shengyin">
                            <label for="shengyin">击持仓列表切换图表</label>
                        </div>
                        <div>
                            <input type="checkbox" id="shengyin">
                            <label for="shengyin">点击最大手数填单</label>
                        </div>
                        <div>
                            <input type="checkbox" id="shengyin">
                            <label for="shengyin">双击持仓和挂单列表的操作确认</label>
                        </div>
                        <div>
                            <input type="checkbox" id="shengyin">
                            <label for="shengyin">输入合约自动切换图表</label>
                        </div>
                        <div>
                            <input type="checkbox" id="shengyin">
                            <label for="shengyin">三键默认指定价下单</label>
                        </div>
                        <div>
                            <input type="checkbox" id="shengyin">
                            <label for="shengyin">隐藏期权持仓表、期权行权表</label>
                        </div>
                        <div>
                            <input type="checkbox" id="shengyin">
                            <label for="shengyin">列表导出文件自动替换</label>
                        </div>
                        <div class="right2_left_top_last_div">
                            <input type="checkbox" id="shengyin">
                            <label for="shengyin">大单拆分(单笔委托超过交易所上限，自动拆分)</label>
                        </div>
                    </div>
                    <div class="right2_left_bottom">
                        <div class="right2_left_bottom_div">
                            <span>反手默认下单方式</span>
                            <select>
                                <option value="1">排队价</option>
                                <option value="2">对手价</option>
                                <option value="2">超价</option>
                                <option value="2">市价</option>
                                <option value="2">最新价</option>
                            </select>
                        </div>
                        <div class="right2_left_bottom_div">
                            <span>点持仓列表填单手数</span>
                            <select class="right2_left_bottom_div_heyue">
                                <option value="1">该合约默认手数</option>
                                <option value="2">该合约全部可用持仓</option>
                            </select>
                        </div>
                        <div class="right2_left_bottom_div">
                            <span>比例平仓下单方式</span>
                            <select>
                                <option value="1">排队价</option>
                                <option value="2">对手价</option>
                                <option value="2">超价</option>
                                <option value="2">市价</option>
                                <option value="2">最新价</option>
                            </select>
                        </div>
                        <div class="right2_left_bottom_div">
                            <span>不支持市价指令的合约，替代为</span>
                            <select>
                                <option value="1">不启用</option>
                                <option value="2">对手价</option>
                                <option value="2">超价</option>
                            </select>
                        </div>
                        <div class="right2_left_bottom_div">
                            <span>账户清仓下单方式</span>
                            <select>
                                <option value="2">对手价</option>
                                <option value="2">市价</option>
                                <option value="2">超价</option>
                            </select>
                        </div>
                        <div class="right2_left_bottom_div">
                            <span>权益显示和计算采用</span>
                            <select>
                                <option value="1">动态权益</option>
                                <option value="2">市值权益</option>
                            </select>
                        </div>
                        <div class="right2_left_bottom_div">
                            <span>下单板显示位置</span>
                            <select>
                                <option value="1">居右</option>
                                <option value="2">居左</option>
                            </select>
                        </div>
                    </div>
                    <div class="right2_left_btn">
                        <button>优先平今品种设置</button>
                    </div>
                </div>
                <div class="body_right2_right">
                    <div class="right2_right_select">
                        <select name="" id="">
                            <option value="1">三键下单</option>
                            <option value="2">传统下单</option>
                            <option value="2">下单工具条</option>
                            <option value="2">页面下单</option>
                            <option value="2">盘口下单</option>
                            <option value="2">盘口炒单</option>
                            <option value="2">标准套利下单</option>
                        </select>
                    </div>
                    <div class="right2_right_body">
                        <div class="right2_right_body_div">
                            <span>一、委托确认</span>
                            <select name="" id="">
                                <option value="1">启用</option>
                                <option value="1">不启用</option>
                            </select>
                        </div>
                        <div class="right2_right_body_div">
                            <span>说明:右键点击列表，选菜单项下单，不受确认开关控制，直接发出委托。</span>
                        </div>
                        <div class="right2_right_body_div">
                            <span>二、双击持仓列表快速平仓</span>
                            <select name="" id="">
                                <option value="1">启用</option>
                                <option value="1">不启用</option>
                            </select>
                        </div>
                        <div class="right2_right_body_div">
                            <span>三、按照禁止双向持仓的原则，自动分配开仓/平仓</span>
                            <select name="" id="">
                                <option value="1">启用</option>
                                <option value="1">不启用</option>
                            </select>
                        </div>
                        <div class="right2_right_body_div">
                            <span>说明：</span>
                        </div>
                        <div class="right2_right_body_div"> 1.没有持仓的情况，自动执行开仓操作。 </div>
                        <div class="right2_right_body_div">2.有多头持仓的情况，点买入按钮自动执行加仓，点卖出按钮自动执行平仓。</div>
                        <div class="right2_right_body_div">3.有空头持仓的情况，点买入按钮自动执行平仓，点卖出按钮自动执行加仓。</div>
                        <div class="right2_right_body_div">4.重新下单，自动撤掉原有挂单。</div>
                        <div class="right2_right_body_div right2_right_body_div45" style="margin-bottom: 4px;">
                            <span>四、合约信息显示</span>
                            <select name="" id="">
                                <option value="1">保证金等信息</option>
                                <option value="1">有仓时显示持仓信息</option>
                            </select>
                        </div>
                        <div class="right2_right_body_div right2_right_body_div45">
                            <span>五、Log区显示</span>
                            <select name="" id="">
                                <option value="1">日志</option>
                                <option value="1">盘口价格</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="body_right3" v-show="showRight==4">
                <div class="body_right3_left">
                    <div class="body_right3_left_title">默认下单手数</div>
                    <div class="right3_left_btn">
                        <button>国内合约默认下单手数</button>
                    </div>
                    <div class="right3_left_div">
                        <input type="checkbox" id="xiadanView">
                        <label for="xiadanView">下单主窗口、下单工具条按可用资金百分比填写手数</label>
                        <input type="number">
                        <span class="baifenhao">%</span>
                    </div>
                    <div class="right3_left_div">
                        <span class="right3_left_div_span">推荐手数倍数</span>
                        <button class="right3_left_div_btn">复位</button>
                        <input type="number">
                        <input type="number">
                        <input type="number">
                        <input type="number">

                    </div>
                    <div class="right3_left_div">
                        <span class="right3_left_div_span">推荐百分比</span>
                        <button class="right3_left_div_btn">复位</button>
                        <input type="number">
                        <input type="number">
                        <input type="number">
                        <input type="number">
                    </div>
                </div>
                <div class="body_right3_right">
                    <div class="body_right3_right_title">默认下单手数</div>
                    <div class="body_right3_right_div">1、选择按固定手数，默认下单手数为设置的手数。</div>
                    <div class="body_right3_right_div">2、选择按可用资金百分比，默认下单手数为按可用资金的百分比计算出的手数。</div>
                    <div class="body_right3_right_div">3、按可用姿金已分比、在服务,器繁忙不能及时返回最大可开仓手数时，无法计算出的手数。</div>
                </div>
            </div>
            <div class="body_right4" v-show="showRight==5">
                <div class="body_right4_div">
                    <span>超价的基准价</span>
                    <select name="" id="">
                        <option value="1">排队价</option>
                        <option value="1">对手价</option>
                        <option value="1">最新价</option>
                    </select>
                </div>
                <div class="body_right4_div">
                    <span>买超价</span>
                    <input type="number">
                </div>
                <div class="body_right4_div">
                    <span>卖超价</span>
                    <input type="number">
                </div>
                <div class="body_right4_div">
                    <button>添加品种超价参数</button>
                </div>
                <div class="body_right4_cont">注意：</div>
                <div class="body_right4_cont">1、超价是在基准价的基础上增减N个最小变动价位。</div>
                <div class="body_right4_cont">2、建议买入的参数设正值，卖出的参数设负值。 </div>
                <div class="body_right4_cont">3、添加品种超价参数，优先按此获取。</div>
            </div>
            <div class="body_right3 body_right5" v-show="showRight==6">
                <div class="body_right3_left body_right5_left">
                    <div class="body_right3_left_title">连续追价参数</div>
                    <div class="right3_left_div right5_left_div">
                        <label for="xiadanView">自动连续追价触发条件</label>
                        <input type="number">
                        <span class="baifenhao">秒没成交</span>
                    </div>
                    <div class="right3_left_div right5_left_div">
                        <span class="right3_left_div_span">追价价格</span>
                        <select name="" id="">
                            <option value="1">阶梯追价</option>
                        </select>
                    </div>
                    <div class="right3_left_div right5_left_div">
                        <span class="right3_left_div_span">追价终止</span>
                        <select name="" id="">
                            <option value="1">不终止</option>
                        </select>
                        <span class="baifenhao">报价价位</span>
                    </div>
                </div>
                <div class="body_right3_right body_right5_right">
                    <div class="body_right3_right_title">说明</div>
                    <div class="body_right3_right_div">1、追价，是指在单子没有及时成交的情况下，撒掉委托，以有利于成交的价格为委托价，重新发出委托。</div>
                    <div class="body_right3_right_div">2、追价价格设置为“阶梯追价”时，在对手价基础上，第一次超1个，第二次超2个，以后每次都超3个价位。</div>
                    <div class="body_right3_right_div">3、追价终止中的数字表示追价下单价格偏离首次下单价格超过多少个价位即停止追价。(追价价格为市价时不受此选项控制)</div>
                </div>
            </div>
            <div class="body_right6" v-show="showRight==7">
                <div class="body_right6_cont">
                    <div class="body_right6_title">止损参数</div>
                    <div class="body_right6_left">
                        <div class="body_right6_left_div">
                            <span>时效</span>
                            <select name="" id="">
                                <option value="1">永久有效</option>
                                <option value="2">延时</option>
                            </select>
                        </div>
                        <div class="body_right6_left_div">
                            <span>开仓自动止损的基准价</span>
                            <select name="" id="">
                                <option value="1">第一批成交价</option>
                                <option value="2">延时</option>
                            </select>
                        </div>
                        <div class="body_right6_left_div">
                            <span>默认策略</span>
                            <select name="" id="">
                                <option value="1">限价止损+限价止盈</option>
                                <option value="2">延时</option>
                            </select>
                        </div>
                        <div class="body_right6_left_div">
                            <span>多单止损比较</span>
                            <span class="sun_jia">最新价</span>
                        </div>
                        <div class="body_right6_left_div">
                            <span>空单止损比较</span>
                            <span class="sun_jia">最新价</span>
                        </div>
                        <div class="body_right6_left_div">
                            <button>国内期货合约默认止损点差参数</button>
                        </div>
                    </div>
                    <div class="body_right6_right">
                        <div class="body_right6_right_div">
                            <input type="checkbox">
                            <label for="">开仓自动止损止盈（条件单、反手、套利、期权、TAS、LME开仓除外）</label>
                        </div>
                        <div class="body_right6_right_div">
                            <input type="checkbox">
                            <label for="">画线止损止盈默认全部持仓</label>
                        </div>
                        <div class="body_right6_right_div">
                            <input type="checkbox">
                            <label for="">输入浮亏/浮盈百分比，生成触发价</label>
                        </div>
                        <div class="body_right6_right_div">
                            <span class="body_right6_right_div_set_width">止损单和保本单委托价格</span>
                            <span>期货</span>
                            <select name="" id="">
                                <option value="1">市价</option>
                            </select>
                            <span>期权</span>
                            <select name="" id="">
                                <option value="1">对手价</option>
                            </select>
                            <a href="//www.baidu.com">风险提示</a>
                        </div>
                        <div class="body_right6_right_div">
                            <span class="body_right6_right_div_set_width">止盈单委托价格</span>
                            <span>期货</span>
                            <select name="" id="">
                                <option value="1">市价</option>
                            </select>
                            <span>期权</span>
                            <select name="" id="">
                                <option value="1">对手价</option>
                            </select>
                        </div>
                        <div class="body_right6_right_div">提示：</div>
                        <div class="body_right6_right_div">1、修改以上属性仅对后续设置的止损单、止盈单生效。</div>
                        <div class="body_right6_right_div">2、开仓自动止损在委托成交后会自动转化为损盈单，止损预备单在云端运行，软件关闭后仍然有效。</div>
                        <div class="body_right6_right_div">3、损盈单不保证成交，市价、超价、对手价下单，50%的概率成交在对手价，与触发价有1个点或更多的点差。</div>
                        <div class="body_right6_right_div">4、损盈单触发后，如果持仓可用数里不足，会自动撤掉原有挂单。</div>
                    </div>
                </div>
            </div>
            <div class="body_right6" v-show="showRight==8">
                <div class="body_right6_cont body_right7_cont">
                    <div class="body_right6_title">条件单参数</div>
                    <div class="body_right6_left body_right7_left">
                        <div class="body_right6_left_div">
                            <span class="body_right6_left_div_name">画线下单自动止盈止损</span>
                            <select name="" id="">
                                <option value="1">启用</option>
                                <option value="2">不启用</option>
                            </select>
                            <span>（损、盈止损参数设置）</span>
                        </div>
                        <div class="body_right6_left_div">
                            <span class="body_right6_left_div_name">画线下单委托价</span>
                            <select name="" id="">
                                <option value="1">对手价</option>
                                <option value="1">超价</option>
                                <option value="1">市价</option>
                                <option value="1">画线价</option>
                            </select>
                        </div>
                        <div class="body_right6_left_div">
                            <span class="body_right6_left_div_name">画线下单持续性</span>
                            <select name="" id="">
                                <option value="1">当前交易日有效</option>
                                <option value="1">永久有效</option>
                            </select>
                        </div>
                        <div class="body_right6_left_div">
                            <input type="checkbox">
                            <label>画线下单使用默认下单手数</label>
                        </div>
                        <div class="body_right6_left_div">
                            <input type="checkbox">
                            <label>最新价上画线默认转为委托单</label>
                        </div>
                        <div class="body_right6_left_div">提醒：修改以上属性仅对后续画线下单生效。</div>
                    </div>
                    <div class="body_right6_right">
                        <div class="body_right6_right_div">
                            <input type="checkbox">
                            <label for="">超过100条自动删除已触发云条件单/损盈单</label>
                        </div>
                        <div class="body_right6_right_div" style="margin-top: 20px;">提示：</div>
                        <div class="body_right6_right_div">1、条件单不保证成交，也不保证成交在触发价，会有1个或更大的交易滑点。</div>
                        <div class="body_right6_right_div">2、条件单在云端运行，软件关闭后仍然有效，云端自动确认结算单。</div>
                        <div class="body_right6_right_div">3、不论是碰线还是直接越线，画线下单都会触发。</div>
                        <div class="body_right6_right_div">4、条件单平仓时，如果持仓可用数里不足，会自动撤掉原有挂单。</div>
                        <div class="body_right6_right_div" style="justify-content: space-between;">
                            5、上期所合约，按照设置决定是否优先平今。<a href="http://www.baidu.com" style="margin-right: 25px;">条件单风险揭示</a>
                        </div>

                    </div>
                </div>
            </div>
            <div class="body_right7" v-show="showRight==9">
                <div class="body_right7_left">
                    <div class="body_right7_left_div">
                        <div class="kuai_jie_jian">未设置</div>
                        <div class="dong_zuo">开/关(Ctrl+键值)</div>
                    </div>
                </div>
                <div class="body_right7_right">
                    <div class="body_right7_right_title">注意：</div>
                    <div class="body_right7_right_div">1、请先设置开/关键值，开启炒单后，才能使用炒单功能。</div>
                    <div class="body_right7_right_div">2、当小键盘上的NumLock键锁定时小键盘上的值有效。</div>
                    <div class="body_right7_right_div">3、关闭炒单后，炒单热键的键，才能用来输入。</div>
                    <div class="body_right7_right_div"><span>4、同向下单时撤掉原有挂单</span><select name="" id="">
                            <option value="1">是</option>
                            <option value="1">否</option>
                        </select></div>
                    <div class="body_right7_right_div">5、开/平/自动热键，对专用下单炫彩键盘也生效。(对外盘无效)</div>
                    <div class="body_right7_right_div"><span>6、挂盈N点平仓单参数N为1</span> <input type="number"></div>
                    <div class="body_right7_right_div">7、手数++、手数-的手数为该合约的默认下单手数。</div>


                </div>
            </div>
            <div class="body_right8" v-show="showRight==10">
                <div class="body_right8_div">
                    <input type="checkbox" id="autoLog">
                    <label for="autoLog">自动记录操作日志</label>
                </div>
                <div class="body_right8_div">
                    <input type="checkbox" id="autoLog">
                    <label for="autoLog">自动确认结算单</label>
                </div>
                <div class="body_right8_div">
                    <input type="checkbox" id="autoLog">
                    <label for="autoLog">登录验证码</label>
                </div>
                <div class="body_right8_div">
                    <input type="checkbox" id="autoLog">
                    <label for="autoLog">标题栏显示资金信息</label>
                </div>
                <div class="body_right8_div">
                    <input type="checkbox" id="autoLog">
                    <label for="autoLog">通知消息一天只弹出一次</label>
                </div>
                <div class="body_right8_div">
                    <input type="checkbox" id="autoLog">
                    <label for="autoLog">启用预期风险度提示</label>
                </div>
                <div class="body_right8_div">
                    <span>风险度提醒阈值</span>
                    <input type="number" class="yuzhi">
                    <span>%</span>
                </div>
            </div>

        </div>
    </div>
</body>

<script>
    const { ipcRenderer } = require('electron');
    import { chartStore } from '@/store/index.js';
    const storeChart = chartStore()

    new Vue({
        el: '#app',
        data: {
            selectMulu: -2,
            showRight: 0,
            isoneMore: true,
            istwoMore: true,
            isShowLeft: true,
            suoPrice: false,
            isSelectPrice: false,
            tableData: [],
            selectPrice: 1,
            isViewList: false,
            client: null,
            mqttxintiao: null,
            loginInfo: null,
            zijin: {},
            reconnecttotal: 0,
            selectHeyue: {}
        },
        watch: {
            'storeChart.hagnqingData'(newVal, oldVal) {
                console.log(`output->newVal`, newVal)
            }
        },
        created() {
            ipcRenderer.on('placeAnOrder', (e, v) => {
                this.loginInfo = v.val
                this.zijin = v.val.zijin.filter(item => item.hb_id == 3)[0]
                this.connectToMqtt(v);
            })
            ipcRenderer.on('select-heyue', (e, v) => {
                console.log(`output->v`, v)
                this.selectHeyue = v
            })
        },
        methods: {
            openHeyueListTap() {
                ipcRenderer.send('oepnHeyueList')
            },
            connectToMqtt() {
                this.client = mqtt.connect(this.loginInfo.tradeLine.node, {
                    clean: true,
                    clientId: 'pc' + Math.random().toString(16).substr(2, 8),
                    connectTimeout: 40000,
                    password: `${this.loginInfo.token}`,
                    reconnectPeriod: 1000,
                    username: `yh_${this.loginInfo.uid}_pc`,
                });

                this.client.on('connect', () => {
                    window.clearInterval(this.mqttxintiao)
                    this.mqttxintiao = window.setInterval(() => {
                        this.client.publish("weituo", '50;', { qos: 2 });
                    }, 30000);
                    this.client.subscribe(`fanhui_${this.loginInfo.uid}`, { qos: 2 }, (error) => {
                        if (!error) {
                            // 初始化
                        } else {
                            console.log('订阅失败')
                        }
                    })

                });
                this.client.on('message', (topic, message) => {
                    console.log('Received message:', message.toString());
                });

                this.client.on("reconnect", () => {
                    this.reconnecttotal++;
                    if (this.reconnecttotal >= 5) {
                        this.client.end();
                    }
                });
                this.client.on("error", () => {
                    this.client.end();
                    this.$message({ message: "链接断开，按F5刷新后重新开始", type: 'error' });
                });
                this.client.on("close", () => {
                    this.client.end();
                    this.$message({ message: "链接断开，按F5刷新后重新开始", type: 'error' });
                });
            },

            subscribe(topic) {
                this.client.subscribe(topic, { qos: 2 });
            },
            publish(parameter) {
                parameter = this.loginInfo.uid + ";" + parameter
                this.client.publish("weituo", parameter, { qos: 2 })
            },
            unsubscribe(topic) {
                this.client.unsubscribe(topic, { qos: 2 });
            },
            disconnect() {
                window.clearInterval(this.heard)
                if (this.client) this.client.end();
            },
            selectMuluTap(v) {
                this.selectMulu = v
                if (v != -1 && v != 2) {
                    this.showRight = v
                }
            },
            changeLeftTap(v) {
                this.isShowLeft = v
            },
            suoPriceTap(v) {
                this.suoPrice = v
            },
            filersZiji(v, type) {
                if (type == '权益') {
                    return parseFloat(v.yue * 1 - v.dongjie * 1 + v.float_yk * 1).toFixed(2)
                }
                if (type == '可用资金') {
                    return parseFloat(v.yue * 1 - v.dongjie * 1 + v.float_yk * 1 - v.jian_baozheng * 1).toFixed(2)
                }
                if (type == '资金使用率') {
                    return v.yue == '0.00' || v.yue == 0 ? '0.00' : ((v.dongjie * 1 + v.float_yk * 1 - v.jian_baozheng * 1) / v.yue * 100).toFixed(2)
                }
                return ''
            },
        },
        beforeDestroy() {
            if (this.client) {
                this.disconnect()
            }
        }
    })
    Vue.use(ELEMENT);
</script>





</html>